<template>
  <a-modal
    destroyOnClose
    title="选择门店"
    :zIndex="zIndex"
    v-model="value"
    :width="900"
    @cancel="onCancel()"
    @ok="onOk"
  >
    <a-card>
      <a-row align="middle" style="margin-bottom: 10px;">
        <a-space class="search-item">门店名称：
          <a-input v-model="queryParam.name" placeholder="请填写搜索门店名称" />
        </a-space>
        <a-space class="search-item">
          <a-button @click="refresh" type="primary">
            搜索
          </a-button>
        </a-space>
      </a-row>
      <a-row
        v-if="selectShopList.length > 0"
        type="flex"
        align="middle"
        class="img-list">
        <img
          class="selectImg"
          v-for="(shop1, index) of selectShopList"
          style="width: 30px;height: 30px;margin-right: 10px;"
          :key="index"
          @click="delSelect(index)"
          :src="shop1.cover_url"
          alt=""/>
      </a-row>
      <s-table
        ref="table"
        size="default"
        row-key="id"
        :columns="columns"
        :scroll="{ y: 300 }"
        :data="loadData"
      >
        <template slot="name" slot-scope="name, shop">
          <a-row>
            <a-space>
              <img style="width: 40px;height: 40px;" :src="shop.cover_url" alt="">
              ID{{ shop.id }}<span style="font-weight: bold;">{{ name }}</span>
            </a-space>
          </a-row>
        </template>
        <a-space slot="action" slot-scope="text, shop">
          <a-button @click="selectShop(shop)" size="small">
            选择
          </a-button>
        </a-space>
      </s-table>
    </a-card>
    <!-- <a-row justify="end" type="flex" style="margin-top: 15px;">
      <a-space>
        <a-button @click="onCancel">
          取消
        </a-button>
        <a-button type="primary" @click="onOk">
          确认
        </a-button>
      </a-space>
    </a-row> -->
  </a-modal>
</template>

<script>
import { shopList } from '@/api/shop'
import { STable } from '@/components'
const columns = [
  {
    title: '门店信息',
    dataIndex: 'name',
    width: 150,
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width:20,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'SearchShop',
  components: {
    STable
  },
  data () {
    return {
      columns: columns,
      catList: [],
      showModal: true,
      selectShopList: [],
      loadData: parameter => {
        var newObj = {}
        Object.assign(newObj, parameter, this.queryParam)
        return shopList(newObj)
          .then(res => {
            console.log(res)
            return res.data
          })
      },
      queryParam: {
        name: ''
      }
    }
  },
  props: {
    zIndex: {
      type: Number,
      default: 1000
    },
    value: {
      type: Boolean,
      default: true
    }
  },
  watch: {},
  created () {},
  methods: {
    refresh (row) {
      this.$nextTick(() => {
        this.$refs.table.refresh(true)
      })
    },
    selectShop (shop) {
      var shopInfo = {
        id: shop.id,
        name: shop.name,
        cover_url: shop.cover_url,
        mibile: shop.mibile,
        longitude: shop.longitude,
        latitude: shop.latitude,
        mobile: shop.mobile,
        score: shop.score
      }
      for (var i = 0; i < this.selectShopList.length; i++) {
        if (this.selectShopList[i].id === shopInfo.id) {
          return false
        }
      }
      this.selectShopList=[]
      this.selectShopList.push(shopInfo)
    },
    delSelect (index) {
      this.selectShopList.splice(index, 1)
    },
    onCancel () {
      this.$emit('input', false)
    },
    onOk () {
      this.$emit('input', false)
      this.$emit('onOk', this.selectShopList)
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.selectImg:hover {
  opacity: .4;
}
.img-list {
  margin-bottom: 10px;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  padding: 6px;
  position: sticky;
  top: -20px;
  z-index: 999999999;
}
</style>
